@mixin htmlfont($lang, $multiple: false, $code: "lang=") {
  @if $multiple {
    @each $area in $lang {
      @include defont($area, $code) {
        @content;
      }
    }
    @include defont($lang, $code) {
      @content;
    }
  } @else {
    @include defont($lang, $code) {
      @content;
    }
  }
}
@mixin headerfont($lang, $multiple: false, $code: "lang=") {
  @if $multiple {
    @each $area in $lang {
      @include defheader($area, $code) {
        @content;
      }
    }
    @include defheader($lang, $code) {
      @content;
    }
  } @else {
    @include defheader($lang, $code) {
      @content;
    }
  }
}
@mixin defont($lang, $code: "lang=") {
  html[#{$code}"#{$lang}"] {
    body,
    button,
    input,
    input,
    textarea {
      @content;
    }
  }
}
@mixin defheader($lang, $code: "lang=") {
  html[#{$code}"#{$lang}"] {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6 {
      @content;
    }
  }
}
@mixin awesomefont() {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

@mixin awesomefont-brands() {
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
}

@mixin box_shadow($value...) {
  -webkit-box-shadow: $value;
  -moz-box-shadow: $value;
  -ms-box-shadow: $value;
  box-shadow: $value;
}

// generic transform
@mixin transform($transforms) {
  -moz-transform: $transforms;
  -o-transform: $transforms;
  -ms-transform: $transforms;
  -webkit-transform: $transforms;
  transform: $transforms;
}

// rotate
@mixin rotate($deg) {
  @include transform(rotate(#{$deg}deg));
}

// scale
@mixin scale($scale) {
  @include transform(scale($scale));
}

// translate
@mixin translate($x, $y) {
  @include transform(translate($x, $y));
}

// skew
@mixin skew($x, $y) {
  @include transform(skew(#{$x}deg, #{$y}deg));
}

//transform origin
@mixin transform-origin($origin) {
  moz-transform-origin: $origin;
  -o-transform-origin: $origin;
  -ms-transform-origin: $origin;
  -webkit-transform-origin: $origin;
  transform-origin: $origin;
}

@mixin bg-variants($parent, $color) {
  #{$parent} {
    background-color: $color !important;
  }
  a#{$parent},
  button#{$parent} {
    @include hover-focus {
      background-color: darken($color, 10%) !important;
    }
  }
}
